<template>
    <div>
        <RenderTest2 :level="1">显示的是h1中的内容</RenderTest2>
        <RenderTest2 :level="2">显示的是h2中的内容</RenderTest2>
        <RenderTest2 :level="3">显示的是h3中的内容</RenderTest2>
        <RenderTest2 :level="4">显示的是h4中的内容</RenderTest2>
    </div>
</template>


<script>
import RenderTest from './RenderTest.vue'
//import RenderTest2 from './RenderTest2.vue'
import RenderTest2 from './RenderTest2.js'

export default {
    name: 'UseRenderMethod',
    components: {
        RenderTest, RenderTest2,
    },
    props: {
        tag: String,
    },
    data() {
        return {
            people: ['小明', 'Duo', 'Amma', 'Deave']
        }
    },

    //说明： template中的内容最终也是通过render进行编译和渲染的
    render(createElement) {
        //createElement 参数1：标签，或vue组件 参数2：属性内容 参数3：子级虚拟节点
        //基本使用 
        //return createElement('h1', {}, '使用render中的 createElement 创建的')

        //传参的方式
        // return createElement(this.tag, {}, this.people.map(m => createElement('li',
        //     { attrs: { class: 'test' }, on: { click: (e) => { console.log(e.target.innerHTML + '--被点了') } } }, `${m}`)))

        //传递组件 //当把上面的template都注释掉后才有效
        return createElement(RenderTest, { props: { msg: '使用组件方式' } }, {})

    }

}
</script>